 <template>
    <div class="dashboard-container">
        <div class="app-container">
            <el-card shadow="never">
                <el-button ref="editMenu" class="filter-item fr" size="small" style="margin-left: 10px;margin-bottom:20px;" @click="handleCreate" type="success" icon="el-icon-edit">添加菜单</el-button>
                <tree-table border :data="dataList" :columns="columns" :tree-structure="true" :defaultExpandAll = "true" @handleUpdate="handleUpdate" @removeUser="removeUser"/>
                <MenuAdd ref="editMenu" :text='text' :pageTitle='pageTitle' :PermissionGroupsList='PermissionGroupsList' :notPointDataList='notPointDataList' :parentDataList='parentDataList' @newDataes="handleLoadData" @handleCloseModal="handleCloseModal">
                </MenuAdd>
            </el-card>
        </div>
    </div>
</template>

<script>
import treeTable from '@/components/TreeTable/index.vue'
import MenuAdd from './../components/menu-add'
import { list, remove } from '@/api/base/menus'
var _this = []
export default {
  name: 'treeTableDemo',
  components: { treeTable, MenuAdd },
  data () {
    return {
      MenuAdd: 'menuAdd',

      dataList: [],
      newArray: [],
      pageTitle: '菜单', // 页面标题
      text: '',
      PermissionGroupsList: [], // 权限加载
      parentDataList: [],
      notPointDataList: [],
      columns: [
        {
          text: '标题',
          value: 'title',
          render: (h, params) => {
            return h('div', [
              h('i', {
                class: 'ivu-icon ' + params.row.icon,
                style: {
                  marginLeft: `${20 * params.row.layer}px`,
                  marginRight: '5px',
                  fontSize: '16px'
                }
              }),
              h('i', params.row.title)
            ])
          }
        },
        {
          text: '权限点代码',
          value: 'code'
        }
      ]
    }
  },
  //   created () {
  //     this.handleLoadData()
  //   },

  mounted () {
    this.handleLoadData()
  },
  // 创建完毕状态
  created () {
    _this = this
  },
  methods: {
    // 获取列表数据
    // async   handleLoadData () {
    //   const { data } = await list()
    //   //   console.log(data)
    //   this.dataList = data
    // },

    // 获取列表数据
    handleLoadData (parameters) {
      this.listLoading = true
      list(parameters).then(data => {
        this.dataList = data.data
        this.listLoading = false
        var newArray = []
        var makeNewItem = function (layer, oldItem) {
          var icon
          if (!oldItem.is_point) {
            if (oldItem.childs && oldItem.childs.length > 0) {
              icon = ' fa fa-folder-open-o fa-fw'
            } else {
              icon = 'fa fa-file-o fa-fw'
            }
          } else {
            icon = ' el-icon-view'
          }
          var newItem = {
            id: oldItem.id,
            pid: oldItem.pid,
            layer: layer,
            is_point: oldItem.is_point,
            code: oldItem.code,
            title: oldItem.title,
            icon: icon
          }
          return newItem
        }
        var makeLayer = function (layer, item) {
          layer++
          changeAray(layer, item)
          layer--
        }
        function changeAray (layer, oldArray) {
          for (var i = 0; i < oldArray.length; i++) {
            newArray.push(makeNewItem(layer, oldArray[i]))

            if (oldArray[i].childs && oldArray[i].childs.length > 0) {
              makeLayer(layer, oldArray[i].childs)
            }
            if (oldArray[i].points && oldArray[i].points.length > 0) {
              makeLayer(layer, oldArray[i].points)
            }
          }
        }

        var la = 0
        changeAray(la, _this.dataList)
        _this.dataList = newArray
      })
    },
    // 新增用户
    handleCreate () {
      this.$refs.editMenu.dialogFormV()
      this.$refs.editMenu.handleResetForm()
    },

    // 弹框关闭
    handleCloseModal () {
      this.$refs.editMenu.dialogFormH()
    },
    // 编辑
    handleUpdate (row) {
      const flag = row.is_point ? 'points' : 'menu'
      this.$refs.editMenu.changeType(flag)
      this.$refs.editMenu.dialogFormV()
      this.$refs.editMenu.hanldeEditForm(row.id)
    },
    // 删除
    async   removeUser (user) {
    //   console.log(user)
      try {
        await this.$confirm('此操作将永久删除用户 , 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        await remove({ id: user })
        this.handleLoadData()
        this.$message.success('删除角色成功')
      } catch (err) {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      }
    }

  }

}

</script>
<style scoped>
.el-table th.el-table__cell{
    background-color: #fafafa !important;
}
</style>
